<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
	</head>
	<body>
		<!--	
			什么组件的模板 就会去什么组件找

			如子组件模板<template></template>里面的东西就回去子组件里面找
			
			被vue实例中绑定的 div标签，里面的东西都会去 vue实例中找

			就类似于变量作用域 



			官方给出一条准则：
			父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在
			子级作用域内编译
		-->

		<div id="app">
			<cpn v-show="isShow"></cpn>
		</div>
		<template id="cpn">
			<div>
				<h2>我是子组件</h2>
				<button v-show="isShow">按钮</button>
			</div>
		</template>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data: {
					message: 'hello',
					isShow: true
				},
				components: {
					cpn: {
						template: "#cpn",
						data() {
							return {
								isShow: false
							}
						}
					}
				}
			});
		</script>
	</body>
</html>
